<template>
  <el-card shadow="never">
    <el-table border stripe :data="serviceList">
      <el-table-column prop="si_name" label="服务名称" min-width="200" align="center" />
      <!-- <el-table-column label="赠送" width="60" align="center">
				<template slot-scope="{ row }">
					<div class="flex flex-justify-center">
						<el-checkbox v-model="row.is_presents" :true-label="1" :false-label="0" />
					</div>
				</template>
</el-table-column>
<el-table-column label="体验" width="60" align="center">
  <template slot-scope="{ row }">
					<div class="flex flex-justify-center">
						<el-checkbox v-model="row.is_experience" :true-label="1" :false-label="0" />
					</div>
				</template>
</el-table-column> -->
      <el-table-column label="数量" align="center" width="60">
        <template> x1 </template>
      </el-table-column>
      <el-table-column label="预约售价" prop="price" width="150" align="center">
        <template slot-scope="{ row }">
          <el-input v-model="row.price" oninput="value=value.replace(/[^\d^\.]/g,'')"
            @blur="row.price = $event.target.value">
            <template slot="prepend">￥</template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope="{ $index: index }">
          <el-button @click="deleteServe(index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex flex-justify-center pt-2">
      <template v-if="browser.isMobile">

        <el-button type="danger" style="width: 200px" size="small" @click="openAddServe">
          添加服务
        </el-button>
      </template>
      <template v-else>
        <cl-choice-service v-model="serviceList" :biz_id="biz_id" @confirm="serviceConfirm" />
      </template>
    </div>
    <reserv-pop ref="reserv" />
  </el-card>
</template>
<script>
import { mapGetters } from "vuex";
import ReservPop from "@/cool/modules/mobile/pages/customer/components/reserv-pop.vue";
import emitter from "element-ui/src/mixins/emitter";
export default {
  name: "cl-service-card",
  components: {
    ReservPop
  },
  mixins: [emitter],
  inject: {
    elForm: {
      default: ""
    },
    elFormItem: {
      default: ""
    },
    $layout: {
      default: ""
    }
  },
  props: {
    // 服务列表
    value: {
      type: Array,
      default: () => []
    },
    biz_id: {
      type: [Number, String],
      default: ""
    },
    validateEvent: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      serviceList: []
    };
  },
  watch: {
    value: {
      handler(v) {
        this.serviceList = v;
      },
      immediate: true
    },
    serviceList: {
      handler(v) {
        this.$emit("input", v);
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters(["browser"]),
  },
  methods: {
    serviceConfirm(val) {
      this.serviceList = val.map(v => ({
        is_presents: 0,
        is_experience: 0,
        ...v
      }));
      this.onChange();
    },
    deleteServe(index) {
      this.serviceList.splice(index, 1);
      this.onChange();
    },
    onChange() {
      this.$nextTick(() => {
        this.$emit("change", this.serviceList);
        if (this.validateEvent) {
          this.dispatch("ElFormItem", "el.form.change", this.serviceList);
        }
      });
    },
    openAddServe() {
      // this.$refs.reserv.open();
      this.$refs.reserv.open(this.biz_id, this.serviceList, this.serviceConfirm);
    }

  }
};
</script>
